<template>
  <el-dialog
    :title="
      classifyId === 0
        ? $t('msg.classifyInfo.addClassifyDialogTitle')
        : $t('msg.classifyInfo.editClassifyDialogTitle')
    "
    :model-value="modelValue"
    @close="closed"
    center
    width="30%"
  >
    <div class="content-container">
      <div class="sub-container">
        <span class="span-title">
          <span>分</span><span>类</span><span>名</span><span>称</span>
        </span>
        <el-input class="input-class" v-model="classifyName" />
      </div>
      <div class="sub-container">
        <span class="span-title">
          <span>挂</span><span>号</span><span>费</span><span>折</span
          ><span>扣</span>
        </span>
        <el-input
          class="input-class"
          v-model="registerDisc"
          max="10"
          min="0"
          step="0.5"
          type="number"
          @change="changeCheck(1)"
        >
          <template #append>折</template>
        </el-input>
      </div>
      <div class="sub-container">
        <span class="span-title">
          <span>诊</span><span>疗</span><span>费</span><span>折</span
          ><span>扣</span>
        </span>
        <el-input
          class="input-class"
          v-model="diagnoseDisc"
          max="10"
          step="0.5"
          min="0"
          type="number"
          @change="changeCheck(2)"
        >
          <template #append>折</template>
        </el-input>
      </div>
      <div class="sub-container">
        <span class="span-title">
          <span>药</span><span>费</span><span>折</span><span>扣</span>
        </span>
        <el-input
          class="input-class"
          v-model="recipeDisc"
          max="10"
          min="0"
          step="0.5"
          type="number"
          @change="changeCheck(3)"
        >
          <template #append>折</template>
        </el-input>
      </div>
      <div class="sub-container">
        <span class="span-title">
          <span>治</span><span>疗</span><span>费</span><span>折</span
          ><span>扣</span>
        </span>
        <el-input
          class="input-class"
          v-model="treatDisc"
          max="10"
          step="0.5"
          min="0"
          type="number"
          @change="changeCheck(4)"
        >
          <template #append>折</template>
        </el-input>
      </div>
      <div class="sub-container">
        <span class="span-title">
          <span>商</span><span>品</span><span>折</span><span>扣</span>
        </span>
        <el-input
          class="input-class"
          v-model="goodsDisc"
          max="10"
          min="0"
          step="0.5"
          type="number"
          @change="changeCheck(5)"
        >
          <template #append>折</template>
        </el-input>
      </div>
      <div class="sub-container">
        <span class="span-title">
          <span>其</span><span>他</span><span>折</span><span>扣</span>
        </span>
        <el-input
          class="input-class"
          v-model="otherDisc"
          max="10"
          min="0"
          step="0.5"
          type="number"
          @change="changeCheck(6)"
        >
          <template #append>折</template>
        </el-input>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed">{{ $t('msg.universal.cancel') }}</el-button>
        <el-button type="primary" @click="onConfirm">{{
          $t('msg.universal.confirm')
        }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, defineProps, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { memberClassifyDetail, saveMemberClassify } from '@/api/member'
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  classifyId: {
    type: Number,
    required: true
  }
})

const emits = defineEmits(['update:modelValue', 'saveClassify'])

const i18n = useI18n()

const onConfirm = async () => {
  classifyInfo.value.id = props.classifyId
  classifyInfo.value.classifyName = classifyName.value
  classifyInfo.value.registerDisc = registerDisc.value * 100
  classifyInfo.value.diagnoseDisc = diagnoseDisc.value * 100
  classifyInfo.value.recipeDisc = recipeDisc.value * 100
  classifyInfo.value.treatDisc = treatDisc.value * 100
  classifyInfo.value.goodsDisc = goodsDisc.value * 100
  classifyInfo.value.otherDisc = otherDisc.value * 100
  await saveMemberClassify(classifyInfo.value)
  if (props.classifyId === 0) {
    ElMessage.success(i18n.t('msg.classifyInfo.addClassifySuccess'))
  } else {
    ElMessage.success(i18n.t('msg.classifyInfo.updateClassifySuccess'))
  }
  emits('saveClassify')
  closed()
}
const closed = () => {
  emits('update:modelValue', false)
}
const classifyInfo = ref({})
// 所有角色
const classifyId = ref(0)
const classifyName = ref('')
const registerDisc = ref(10)
const diagnoseDisc = ref(10)
const recipeDisc = ref(10)
const treatDisc = ref(10)
const goodsDisc = ref(10)
const otherDisc = ref(10)

const getClassifyDetail = async () => {
  const res = await memberClassifyDetail(props.classifyId)
  registerDisc.value = res.registerDisc / 100
  diagnoseDisc.value = res.diagnoseDisc / 100
  recipeDisc.value = res.recipeDisc / 100
  treatDisc.value = res.treatDisc / 100
  goodsDisc.value = res.goodsDisc / 100
  otherDisc.value = res.otherDisc / 100
  classifyName.value = res.classifyName
  classifyId.value = props.classifyId
}

const changeCheck = (index) => {
  switch (index) {
    case 1:
      if (registerDisc.value > 10) {
        registerDisc.value = 10
      } else if (registerDisc.value < 0) {
        registerDisc.value = 0
      }
      break
    case 2:
      if (diagnoseDisc.value > 10) {
        diagnoseDisc.value = 10
      } else if (diagnoseDisc.value < 0) {
        diagnoseDisc.value = 0
      }
      break
    case 3:
      if (recipeDisc.value > 10) {
        recipeDisc.value = 10
      } else if (recipeDisc.value < 0) {
        recipeDisc.value = 0
      }
      break
    case 4:
      if (treatDisc.value > 10) {
        treatDisc.value = 10
      } else if (treatDisc.value < 0) {
        treatDisc.value = 0
      }
      break
    case 5:
      if (goodsDisc.value > 10) {
        goodsDisc.value = 10
      } else if (goodsDisc.value < 0) {
        goodsDisc.value = 0
      }
      break
    case 6:
      if (otherDisc.value > 10) {
        otherDisc.value = 10
      } else if (otherDisc.value < 0) {
        otherDisc.value = 0
      }
      break
  }
}
const initData = () => {
  classifyId.value = 0
  classifyName.value = ''
  registerDisc.value = 10
  diagnoseDisc.value = 10
  recipeDisc.value = 10
  treatDisc.value = 10
  goodsDisc.value = 10
  otherDisc.value = 10
}
// watch(
//   () => props.classifyId,
//   (val) => {
//     if (val > 0) {
//       getClassifyDetail()
//     } else {
//       initData()
//     }
//   }
// )

watch(
  () => props.modelValue,
  (isOpen) => {
    if (isOpen) {
      // 当对话框打开时初始化数据
      if (props.classifyId > 0) {
        getClassifyDetail() // 如果是编辑模式，获取详细信息
      } else {
        initData() // 如果是新增模式，初始化数据
      }
    }
  }
)
</script>

<style lang="scss" scoped>
.content-container {
  width: 100%;
  text-align: center;
  .sub-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    .span-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      line-height: 40px;
      width: 100px;
      font-size: 16px;
      font-weight: bold;
    }
    .input-class {
      margin-left: 20px;
      width: 240px;
    }
  }
}
</style>
